<template>
	<view class="wrap">


		<view class="boradList" v-if="info">
			<view class="item color1">
				<view class="left">
					<view class="top">
						订单
					</view>
					<view class="bot">
						<u-count-to font-size="32rpx" color="#FFFFFF" :end-val="info.totalOrderCount" separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/Bill.png" mode=""></image>
				</view>
			</view>
			<view class="item color2">
				<view class="left">
					<view class="top">
						佣金
					</view>
					<view class="bot">

						<u-count-to font-size="32rpx" color="#FFFFFF" :end-val="info.totalCommissionAmount"
							separator=","></u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/Financing-one.png" mode=""></image>
				</view>
			</view>
			<view class="item color3">
				<view class="left">
					<view class="top">
						金额
					</view>
					<view class="bot">

						<u-count-to font-size="32rpx" color="#FFFFFF" :end-val="info.totalOrderAmount" separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/Finance.png" mode=""></image>
				</view>
			</view>
			<view class="item color4">
				<view class="left">
					<view class="top">
						提现
					</view>
					<view class="bot">

						<u-count-to font-size="32rpx" color="#FFFFFF" :end-val="info.totalCashAmount" separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/Expenses.png" mode=""></image>
				</view>
			</view>
		</view>
		

		<view class="calcu" v-if="info1">
			<view class="item">
				<view class="left">
					<view class="top">
						意向客户
					</view>
					<view class="bot">

						<u-count-to :duration="500" font-size="32rpx" color="#0F1417"
							:end-val="info1.totalCustomerCount" separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/kanabn3.png" mode=""></image>

				</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="top">
						APP会员
					</view>
					<view class="bot">

						<u-count-to :duration="500" font-size="32rpx" color="#0F1417" :end-val="info1.totalMemberCount"
							separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/kanabn4.png" mode=""></image>

				</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="top">
						普通会员
					</view>
					<view class="bot">

						<u-count-to :duration="500" font-size="32rpx" color="#0F1417"
							:end-val="info1.totalCommonMemberCount" separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/kanabn2.png" mode=""></image>

				</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="top">
						VIP会员
					</view>
					<view class="bot">

						<u-count-to :duration="500" font-size="32rpx" color="#0F1417"
							:end-val="info1.totalVIPMemberCount" separator=",">
						</u-count-to>
					</view>
				</view>
				<view class="right">
					<image src="https://oss.6mate.cn/mini/kanabn1.png" mode=""></image>

				</view>
			</view>
		</view>

		<view v-if="info2" class="rank income">
			<view class="tit">
				<view class="name">
					收入统计
				</view>
			</view>
			<view class="itemBoxs bg1">
				<view class="item">
					<view class="name">
						今日收入
					</view>
					<view class="count">
						<u-count-to font-size="32rpx" color="#0F1417" :end-val="info2.todayIncome" separator=",">
						</u-count-to>

					</view>
				</view>


				<view class="item">
					<view class="name">
						昨日收入
					</view>
					<view class="count">
						<u-count-to font-size="32rpx" color="#0F1417" :end-val="info2.yesterdayIncome" separator=",">
						</u-count-to>

					</view>
				</view>
			</view>
			<view class="itemBoxs bg2">
				<view class="item">
					<view class="name">
						本月收入
					</view>
					<view class="count">
						<u-count-to font-size="32rpx" color="#0F1417" :end-val="info2.monthIncome" separator=",">
						</u-count-to>

					</view>
				</view>
				<view class="item">
					<view class="name">
						上月收入
					</view>
					<view class="count">
						<u-count-to font-size="32rpx" color="#0F1417" :end-val="info2.lastMonthIncome" separator=",">
						</u-count-to>

					</view>
				</view>
			</view>
		</view>


		<view class="cooperate" v-if="info3">
			<view class="tit">
				<view class="name">
					排名公示
				</view>
				<view class="time">
					（上月）
				</view>
			</view>
			<view class="tabs">
				<view :class="[cur1==index?'active':'']" @click="change1(index)" v-for="(item,index) in list">
					{{item.name}}
				</view>
			</view>
			<view class=" same" v-if="curDate.length">
				<view class="nums">
					排名
				</view>
				<view class="name">
					姓名
				</view>
				<view class="ranks">
					手机号
				</view>
				<view class="handle">
					<view class="">

					</view>
				</view>
			</view>
			<view class="rankBox" v-if="curDate.length">
				<view class="list " v-for="(item,index) in curDate">
					<view class="tops same" @click="lookDetail(item)">
						<view class="nums">
							{{item.userRank}}
						</view>
						<view class="name">
							{{item.realName}}
						</view>
						<view class="ranks">
							{{item.mobile}}
						</view>
						<view class="handle">
							<view :class="item.flag?'down':'up'">
								<u-icon name="arrow-down" color="#ced0d1" size="28"></u-icon>

							</view>

						</view>
					</view>
					<view class="bots rank" v-show="item.flag">

						<!-- 	意向客户(customerCount)、
						普通会员(commonMemberCount)、
						VIP会员(vipMemberCount)、
						团队数量(joinUserCount)、
						订单数量(orderCount)、
						订单金额(totalAmount) -->
						<view class="list">
							<view class="item">
								<view class="name1">
									意向客户
								</view>
								<view class="count">
									<u-count-to font-size="32rpx" color="#0F1417" :end-val="item.customerCount"
										separator=",">
									</u-count-to>
									<!-- {{item.customerCount}} -->
								</view>
							</view>
							<view class="item">
								<view class="name1">
									普通会员
								</view>
								<view class="count">
									<u-count-to font-size="32rpx" color="#0F1417" :end-val="item.commonMemberCount"
										separator=",">
									</u-count-to>
									<!-- {{item.commonMemberCount}} -->
								</view>
							</view>
							<view class="item">
								<view class="name1">
									VIP会员
								</view>
								<view class="count">
									<u-count-to font-size="32rpx" color="#0F1417" :end-val="item.vipMemberCount"
										separator=",">
									</u-count-to>
									<!-- {{item.vipMemberCount}} -->
								</view>
							</view>
							<view class="item">
								<view class="name1">
									团队数量
								</view>
								<view class="count">
									<u-count-to font-size="32rpx" color="#0F1417" :end-val="item.joinUserCount"
										separator=",">
									</u-count-to>
									<!-- {{item.joinUserCount}} -->
								</view>
							</view>
							<view class="item">
								<view class="name1">
									订单数量
								</view>
								<view class="count">
									<u-count-to font-size="32rpx" color="#0F1417" :end-val="item.orderCount"
										separator=",">
									</u-count-to>
									<!-- {{item.totalCount}} -->
								</view>
							</view>
							<view class="item">
								<view class="name1">
									订单金额
								</view>
								<view class="count">
									<u-count-to font-size="32rpx" color="#0F1417" :end-val="item.totalAmount"
										separator=",">
									</u-count-to>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="rankBox nodata" v-else>
				<u-empty text="暂无数据" mode="data"></u-empty>
			</view>

			<view v-if="tips" class="notice">
				<image src="https://oss.6mate.cn/mini/icon_not verified.png" mode=""></image>
				<view class="info">
					{{tips}}
					<!-- 上月排名前十的红娘，本月升级为合伙人，可享受合伙人收益分成权益，权益仅本月有效。 -->
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {

		data() {
			return {
				info: null,
				info1: null,
				info2: null,
				info3: null,
				curDate: [],
				headstyle: {},
				activeItenStyle: {
					backgroundColor: 'red',
					borderRadius: '16rpx',
				},
				list: [{
					name: '西安市'
				}, {
					name: '陕西省'
				}],
				cur1: 0,
				tips: ''

			}
		},
		onShow() {
			// 

			this.getrankTip()
			// 订单及金额总数统计
			this.GetboardOrderGetTotal()
			// 客户及会员总数统计接口
			this.GetboardCustomerGetTotal()
			// 收入统计
			this.GetboardIncomeGetTotal()
			//排名查询
			this.GetboardRankGet()
			this.FnloginUser()
		},

		methods: {

			getrankTip() {

				this.$u.api.rankTip()
					.then(res => {
						this.tips = res?.data
						console.log(res, 77777777);
					});
			},

			FnloginUser() {

				this.$u.api.loginUser()
					.then(res => {
						this.list = [{
							name: res?.data?.province
						}, {
							name: res?.data?.city
						}]
					});
			},
			//排名查询
			GetboardRankGet() {
				this.$u.api.boardRankGet()
					.then(res => {
						this.info3 = res?.data
						this.curDate = res?.data?.provinceRanks
						this.curDate = this.curDate?.map(r => {
							return {
								...r,
								flag: false
							}
						})
					});
			},
			// 收入统计
			GetboardIncomeGetTotal() {
				this.$u.api.boardIncomeGetTotal()
					.then(res => {
						this.info2 = res?.data
					});
			},
			// 订单及金额总数统计
			GetboardOrderGetTotal() {
				this.$u.api.boardOrderGetTotal()
					.then(res => {
						this.info = res?.data
					});
			},
			// 客户及会员总数统计接口
			GetboardCustomerGetTotal() {
				this.$u.api.boardCustomerGetTotal()
					.then(res => {
						this.info1 = res?.data
					});
			},
			lookDetail(item) {
				item.flag = !item.flag
			},

			change1(index) {
				this.cur1 = index;
				if (index == 0) {
					this.curDate = this.info3?.provinceRanks
				} else {
					this.curDate = this.info3?.cityRanks
				}

				this.curDate = this.curDate?.map(r => {
					return {
						...r,
						flag: false
					}
				})
			}
		}
	};
</script>

<style>
	page {
		background: #F7F8FA;
	}
</style>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx 0 24rpx 32rpx;

		.boradList {
			display: flex;
			flex-wrap: wrap;
			padding-right: 16rpx;

			.item {
				background: #fff;
				flex-basis: calc(50% - 16rpx);
				// width: 49%;
				// margin-right: 2%;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				// width: 336rpx;
				height: 124rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				display: flex;
				justify-content: space-between;

				.left {
					padding-left: 16rpx;

					.top {
						padding-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.bot {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 38rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				.right {
					padding: 8rpx 8rpx 0 0;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				&:nth-child(2n) {
					margin-right: 0;
				}

				&.color1 {
					background: linear-gradient(132deg, #7FC0FB 0%, #4088F4 100%);
				}

				&.color2 {
					background: linear-gradient(138deg, #F48D60 0%, #DF2800 100%);
				}

				&.color3 {
					background: linear-gradient(132deg, #FFD572 0%, #F9872F 100%);
				}

				&.color4 {
					background: linear-gradient(131deg, #72DE99 0%, #108738 100%);
				}

			}
		}

		.calcu {
			/deep/ .u-count-num {
				font-weight: 500 !important;
			}

			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-right: 30rpx;
			padding: 32rpx 32rpx 0 24rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 24rpx;

			.item {
				margin-bottom: 32rpx;
				// width: 50%;
				display: flex;
				justify-content: space-between;

				&:nth-child(2n-1) {
					width: 42%;
					margin-right: 8%;
				}

				&:nth-child(2n) {
					width: 42%;
					margin-left: 8%;
				}

				.left {
					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #4E5969;
						line-height: 28rpx;
					}

					.bot {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 32rpx;
						color: #0F1417;
						line-height: 38rpx;
					}
				}

				.right {

					// margin-left: 92rpx;
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.income {
			margin-bottom: 32rpx;
			padding: 0 32rpx 32rpx 32rpx !important;
			margin-right: 32rpx;

			.itemBoxs {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&.bg1 {
					margin-top: -8rpx;
					background: #FFF7F3;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 20rpx 56rpx 20rpx 16rpx;
				}

				&.bg2 {
					margin-top: 16rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 20rpx 56rpx 20rpx 16rpx;
				}

				.item {
					flex: 1;

					&:nth-child(1) {
						margin-right: 8%;
					}

					.name {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.7);
						margin-bottom: 8rpx;
					}

					.count {}
				}
			}
		}

		.rank {
			padding: 0 0 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.list {
				background: #F8FAFB;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 24rpx 36rpx 26rpx 24rpx;

				margin-top: 16rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				&:after {
					content: '';
					width: 33%;
				}

				.item {
					width: 33%;

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						margin-bottom: 12rpx;
					}

					.name1 {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 22rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 26rpx;
					}

					.count {
						margin-top: 10rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 32rpx;
						color: #0F1417;
						line-height: 38rpx;
					}
				}
			}
		}

		.cooperate {
			margin: 24rpx 32rpx 0 0;
			padding: 0 32rpx 0 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.same {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #9FA1A2;
				line-height: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 0 16rpx 0;

				.nums {
					width: 80px;
				}

				.name {
					flex: 1.2;
				}

				.ranks {
					flex: 1.5;
				}

				.handle {

					// width: 40px;
					>view {
						width: 28rpx;
						height: 28rpx;
						text-align: right;
					}


					.up {
						transition: all 0.3s;
					}

					.down {
						transform: rotate(-180deg);
						transition: all 0.3s;
					}
				}
			}

			.rankBox {
				&.nodata {
					padding: 50rpx 0;
				}

				.list {
					border-bottom: 1rpx solid #F5F5F5;

					&:last-child {
						border-bottom: none;
					}

					.nums {
						width: 80px;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #FA4A53;
						line-height: 33rpx;
					}

					.name {
						flex: 1.2;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 33rpx;
					}

					.ranks {
						flex: 1.5;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 33rpx;
					}

					.handle {
						// width: 40px;

					}

					&:nth-child(2) {
						.nums {
							color: #FFA340;
						}
					}

					&:nth-child(3) {
						.nums {
							color: #FCD224;
						}
					}


				}
			}

		}

		.tit {
			padding: 24rpx 0 32rpx 0;
			display: flex;
			align-items: center;

			.name {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #FA4A53;
				line-height: 39rpx;
			}

			.time {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #a7a9a9;
				line-height: 28rpx;
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			height: 64rpx;
			background: #EDEFF0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			view {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 44rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				&.active {
					color: #FAFDFF;
					height: 64rpx;
					background: #FA4A53;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
		}
	}

	.notice {
		padding-bottom: 24rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 20rpx;
		color: #A6A6A6;
		line-height: 24rpx;
		display: flex;
		align-items: flex-start;

		image {
			margin-right: 8rpx;
			width: 24rpx;
			height: 24rpx;
		}

		.info {
			flex: 1;
		}
	}
</style>
